<template>
  <div>
    <h2>x: {{x}}, y: {{y}}</h2>
    <hr>
    <h2 v-if="loading">正在加载中...</h2>
    <h2 v-else-if="errorMsg">{{errorMsg}}</h2>
    <img v-else :src="result[0].url" alt="img">
  </div>
</template>

<script lang="ts">
import {default as useClickPosition} from '@/hooks/useClickPosition'
import {default as useUrlLoader} from '@/hooks/useUrlLoader'
import {watch} from 'vue'

interface ICat {
  id: string
  url: string
}

interface IDog {
  message: string
  status: string
}

export default {
  name: 'About',

  setup () {
    const {x, y} = useClickPosition()
    // const url = 'https://dog.ceo/api/breeds/image/random'
    // const {result, loading, errorMsg} = useUrlLoader<IDog[]>(url)


    const url = 'https://api.thecatapi.com/v1/images/search'
    const {result, loading, errorMsg} = useUrlLoader<ICat[]>(url)

     watch(result, (value) => {
       if (value) {
         alert(value[0].url)
       }
    })

    return {
      x,
      y,
      result, 
      loading, 
      errorMsg
    }
  }
}
</script>

<style scoped>

</style>
